<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>jquery.dynatree.js documentation</title>

	<meta name="keywords" content="dynatree JavaScript JS dynamic html tree view treeview widget plugin for jQuery data structure library ajax open source free">
	<meta name="description" content="dynatree is a JavaScript treeview plugin for jQuery with support for lazy loading of branches.">

	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
    <script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<!-- Convert tabs to spaces and doc CSS -->
	<link rel='stylesheet' type='text/css' href='howto.css'>
	<script src='howto.js' type='text/javascript'></script>
	<!-- Automatic TOC generator -->
	<script src='./jquery.planize.js' type='text/javascript'></script>
	<!-- PrettyPrint (triggered in onload event) -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type='text/javascript'></script>

	<script type='text/javascript'>
	$(function(){
		// Log to Google Analytics, when not running locally
		if ( document.URL.toLowerCase().indexOf('wwwendt.de/')>=0 ) {
			_uacct = "UA-316028-1";
			urchinTracker();
		}
		// Create TOC
		$("html *").planize({
			title: "Table of contents",
		    min_level: 2,
            generate_toc: true,
            toc_elem: $("#toc")
		});
		// Format code samples
		prettyPrint();
	});
	</script>
</head>

<body>


<h1>Dynatree documentation</h1>

<div class="hint">This document describes dynatree <strong>version 0.3</strong>.</div>
<div class="hint">
	Document revision: $Revision:$.<br>
	A current version may be found at the project site <a href="http://wwwendt.de/tech/dynatree/index.html">http://wwwendt.de/tech/dynatree/index.html</a>.
</div>
<p>
	Dynatree is a dynamic JavaScript tree view control with support for lazy loading of branches.
</p>
<p>
	Main features:
</p>
<ul>
	<li>Open source (<a href="http://www.opensource.org/licenses/mit-license.php">MIT-License</a>)
	<li>Programmable through an object oriented interface.
	<li>Support for lazy loading and Ajax.
	<li>Keyboard aware.
	<li>Initializes from html code or JavaScript objects.
	<li>Implemented as a <a href="http://jquery.com">jQuery</a> plugin.<br>
		(Note: this doesn't mean that you have to use jQuery for your whole site.)
</ul>

<!-- jquery.planize will generate a TOC here: -->
<div id="toc">
</div>


<h2>Download</h2>

<p>
	You can download the current dynatree package at
	<a href="http://wwwendt.de/tech/dynatree/index.html">http://wwwendt.de/tech/dynatree/index.html</a>.
	It contains everything needed includging the source, some documentation and examples.<br>
	jQuery is already included, but you can check the <a href="http://www.jquery.com">jQuery site</a>
	for the latest versions of jquery.js and ui.core.js.
</p>


<h2 id="quickExample">Quick start</h2>

<p>
	Let's start with a simple example:
</p>

<div class="codesample">
<a href="sample-quick.html">Try this example...</a>
<pre class="prettyprint">
&lt;html>
&lt;head>
	&lt;!-- Include the required JavaScript libraries: -->
	&lt;script src='jquery/jquery.js' type='text/javascript'>&lt;/script>
	&lt;script src='jquery/ui.core.js' type='text/javascript'>&lt;/script>
    &lt;script src='jquery/jquery.cookie.js' type='text/javascript'>&lt;/script>

	&lt;link rel='stylesheet' type='text/css' href='skin/ui.dynatree.css'>
	&lt;script src='jquery.dynatree.js' type='text/javascript'>&lt;/script>

	&lt;!-- Add code to initialize the tree when the document is loaded: -->
	&lt;script type='text/javascript'>
	$(function(){
		// Attach the dynatree widget to an existing &lt;div id="tree"> element
		// and pass the tree options as an argument to the dynatree() function:
		$("#tree").dynatree({
			onSelect: function(dtnode) {
				// A DynaTreeNode object is passed to the select handler
				alert("You selected " + dtnode.data.title);
			},
			persist: true,
			children: [ // Pass an array of nodes.
				{title: "Item 1"},
				{title: "Folder 2", isFolder: true,
					children: [
						{title: "Sub-item 2.1"},
						{title: "Sub-item 2.2"}
						]
					},
				{title: "Item 3"}
			]
		});
	});
	&lt;/script>
&lt;/head>
&lt;body>
	&lt;!-- Add a &lt;div> element where the tree should appear: -->
	&lt;div id="tree"> &lt;/div>
&lt;/body>
&lt;/html>
</pre>
</div>
<p>
	As an alternative, it is possible to leave away the <code>children</code> option and
	add a &lt;ul> inside the &lt;div id="tree"> tag instead.<br>
	See <a href="#initFromUl">Initializing the tree structure from a &lt;ul> element</a> for an example.
</p>
<p>
	See here for a more <a href="sample-2.html">advanced example</a>.
</p>
<p>
	I am going into more details in the following sections.
</p>


<h2>Initializing the tree</h2>

<p>
	Dynatree is based on and made for jQuery. If you are not familiar with this, you might also want to check the <a href="http://docs.jquery.com">jQuery documentation</a>.
</p>
<p>
	The tree is initialized in the onload event of the html document. In jQuery this is usually done by passing a function to $(..) :
</p>
<pre class="prettyprint">
&lt;head>
	&lt;script type='text/javascript'>
		$(function(){
			[&#8230;]
		});
	&lt;/script>
&lt;/head>
</pre>

<p>
	The dynatree widget is then attached to an empty &lt;div > element with a given ID of 'tree'.
	This id can have any value, it only has to match the jQuery selector, in our case '#tree'.<br>
	Options are passed to the dynatree() function as a dictionary in curly braces:
</p>
<pre class="prettyprint">
			$("#tree").dynatree({
				[&#8230;]
			});
</pre>


<h3>Tree options</h3>

<p>
	Tree options are passed as plain JavaScript objects in curly braces, e.g.<br>
	<code>{ &#8230; }</code>.<br>
</p>
<p>
	The following script shows the available options.<br>
	All options have a reasonable default, so we may only have to pass the <code>onSelect</code> handler.
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	title: "Dynatree root", // Name of the root node.
	rootVisible: false, // Set to true, to make the root node visible.
	rootCollapsible: false, // Prevent root node from being collapsed.
	imagePath: undefined, // Path to a folder containing icons. Defaults to 'skin/' subdirectory.
	children: null, // Init tree structure from this object array.
	initId: null, // Init tree structure from a &lt;ul> element with this ID.
	initAjax: null, // Ajax options used to initialize the tree strucuture.
	onSelect: null, // Callback when a node is selected.
	onUnselect: null, // Callback when a node is deselected.
	onLazyRead: null, // Callback when a lazy node is expanded for the first time.
	onFocus: null, // Callback when a node receives keyboard focus.
	onBlur: null, // Callback when a node looses focus.
	focusRoot: true, // Set focus to root node on init.
	keyboard: true, // Support keyboard navigation.
	autoCollapse: false, // Automatically collapse all siblings, when a node is expanded.
	expandOnAdd: false, // Automatically expand parent, when a child is added.
	clickFolderMode: 3, // 1:select, 2:expand, 3:select and expand
	selectionVisible: true, // Make sure, selected nodes are visible (expanded).
	idPrefix: 'ui-dynatree-id-', // Used to generate node id's like &lt;span id="ui-dynatree-id-<i>key</i>">.
    persist: false, // Persist expand-status to a cookie
	ajaxDefaults: { // Used by initAjax option
		cache: false, // Append random '_' argument to url to prevent caching.
		dataType: "json" // Expect json format and pass json object to callbacks.
	},
	strings: {
		loading: "Loading&#8230;",
		loadError: "Load error!"
	},
});
</pre>

<p>
	<strong>Details:</strong>
</p>
<dl class="optionList">
	<dt>clickFolderMode
	<dd>
		Type: integer, default: 3.<br>
		Define, how a mouse click will change a folder status.
		<ol>
		<li>Single-clicking a folder title (or pressing the [enter] or [space] key) will select it.<br>
		    Double-click (or [+] or [right]) expands it.
		<li>Single-clicking a folder title expands the node. The folder cannot
		    be selected.
		<li>Single-clicking a folder title will select and expand it.
		</ol>  
	</dd>
	<dt>persist
	<dd>
		Type: boolean, default: false.<br>
		True: the tree's expand state is saved to a session cookie, so reloading 
		the page will not collapse all nodes.<br>
		Notes: the nodes must have a key defined. Also, it will not work with 
		lazy nodes. 
	</dd>
</dl>
<p class="info">
	selectExpandsFolders is deprecated. Use clickFolderMode instead.
</p>


<h3>Initializing the tree structure</h3>

<p>
	A tree structure is made of <i>nodes</i>. Every node may in turn contain
	a list child nodes.<br>
	A dynatree always has exactly one <i>root node</i>, and all top level nodes
	of our tree are added below.<br>
	The root node is usually hidden, so we only see the nodes that we have added.
</p>
<p>
	Dynatree can read it's structure from different sources:
</p>
<ol>
	<li>If the <code>children</code> option is passed, it will be used.
	<li>Otherwise, if the <code>initAjax</code> option is passed, it will be used.
	<li>Otherwise, if the <code>initId</code> option is passed, it will be used.
	<li>Otherwise, if the the container &lt;div> element contains a &lt;ul> element,
	it will be used.
	<li>Otherwise, the tree is left empty.<br>
		But we may choose to do so, if we want to modify the tree programmatically.
</ol>
<p>
	Methods 1-3 expect a list of node options, as described in the following
	sections.
</p>


<h4 id="nodeOptions">Node options</h4>

<p>
	Node options are defined as plain JavaScript objects in curly braces, e.g.<br>
	<code>{ &#8230; }</code>.<br>
	Most of the time we pass a list of node options like this<br>
	<code>children: [ { &#8230; }, { &#8230; }, &#8230; ]</code>.
</p>
<p>
	The follwing snippet shows the attributes that can be used to define a tree node.<br>
	There are reasonable default values for all options, so we may only have to pass a <code>title</code>.
</p>

<pre class="prettyprint">
children: [
	{
		title: null, // (required) Displayed name of the node (html is allowed here)
		key: null, // May be used with select(), find(), ...
		isFolder: false, // Use a folder icon. Also the node is expandable but not selectable.
		isLazy: false, // Call onLazyRead() when the node is expanded for the first time to allow for delayed creation of children.
		expand: false, // Initial expand status.
		tooltip: null, // Show this popup text.
		icon: null, // Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon.
		// NOTE: we can also add custom attributes here.
		// This may then also be used in the onSelect() or onLazyTree() callbacks.
	},
	[&#8230;]
]
</pre>

<p>
	The node options are also passed to the event handlers and can be accessed like this:
</p>
<pre class="prettyprint">
onSelect: function(dtnode) {
	alert("You selected " + dtnode.data.title);
},
</pre>

<p>
	<strong>Details:</strong>
</p>
<dl class="optionList">
	<dt>title
	<dd>
		Type: string, default: "".<br>
		Displayed name of the node (html markup is allowed here).
	</dd>
	<dt>key
	<dd>
		Uniquely identifies this node. It is optional, but we need it for some
		functions like <code>tree.selectKey()</code>.<br>
		If specified, the node's element id is generated by prepending a prefix
		like this: <code>ui-dynatree-id-<i>1234</i></code>.
	</dd>
	<dt>isFolder
	<dd>
		When a node is of type <i>folder</i>, it get's a special folder icon and class name.<br>
		We usually use them to hold child nodes.<br>
		Also, folders can be expanded by clicking the title text (this behavior 
		can be controlled using the <code>clickFolderMode</code> option).<br>
		<br>
		Non-folders ('documents') may also contain child nodes.<br>
		Clicking on a child node selects it, so we have to click the small [+] icon in front to expand such a document node.
	</dd>
	<dt>isLazy
	<dd>
		Enables delayed loading of the node contents. When a lazy node is expanded
		for the first time, the onLazyTree() callback is called.
	</dd>
	<dt>expand
	<dd>
		If set to true, the node will be initially expanded.
	</dd>
	<dt>tooltip
	<dd>
		Optional string to display in a popup window when the cursor hovers over
		the node.
	</dd>
	<dt>icon
	<dd>
		Optional name of an image file relative to the image directory. <br>
		If <i>null</i> specified, a default image is used depending on the node type (folder
		or document). This is the default.<br>
		If <i>false</i> specified, no image is displayed.
	</dd>
	<dt>children
	<dd>
		Array of node options, that are used to generate child nodes.<br>
		This option is only valid when passed to certain functions, like <code>DynTreeNode.append()</code>.
	</dd>
</dl>

<p>
	To override the node attribute <i>defaults</i>, modify the structure before initializing
	dynatree:
</p>
<pre class="prettyprint">
&lt;script type='text/javascript'>
    $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default

	$(function(){
		$("#tree").dynatree({
			rootVisible: false,
			[...]
</pre>


<h4>Initializing the tree structure from an object array</h4>

<p>
	In the <a href="#quickExample">quick example above</a> we have already seen how a tree is initialized by passing a
	node array with the <code>children</code> option.
</p>
<pre class="prettyprint">
$("#tree").dynatree({
	children: [ &#8230; ],
	[&#8230;]
});
</pre>
<p>
	See also <a href="#nodeOptions">Node options</a>.
</p>


<h4 id="ajaxResponse">Initializing the tree structure from an Ajax response</h4>

<p>
	Instead of passing an array of data objects, we can pass a url in the <code>initAjax</code>
	option that will be used to contact a Ajax webservice.
</p>
<p>
	This webservice is expected to return an JSON object response, as explained in <a href="#nodeOptions">Node options</a>.
</p>

<pre class="prettyprint">
$("#tree").dynatree({
    initAjax: {url: "/ajaxTree",
    		   data: {key: "root", // Optional arguments to append to the url
                      mode: "all"
                      }
               },
	[&#8230;]
});
</pre>

<p>
	Because the data request is performed asynchronously, the document will load faster.
	Dynatree will display a spinning wheel, while waiting for the request to complete.
</p>
<p>
	See <a href="#lazyLoading">Loading child nodes on demand</a> for details.
</p>


<h4 id="initFromUl">Initializing the tree structure from a &lt;ul> element</h4>

<p>
	If the container &lt;div> contains a &lt;ul> element, the node titles are 
	read from the &lt;li> tags.<br>
	If the title contains html markup, it may be better to wrap it inside a span element.
</p>
<p>
	All other node options are specified in the <code>data</code> attribute of a &lt;li> element.
</p>
<p class="info">
	Note that the <code>data</code> attribute is not valid in some doctypes (HTML 4.01 transitional and Strict and XHTML 1.0 Strict).<br>
	Validators will complain about this.
</p>
<p>
	Nested &lt;ul> elements are used to build a hierarchical tree structure.<br>
	After the &lt;ul> element was parsed, it is removed from the DOM tree.
</p>

<div class="codesample">
	<a href="sample-1.html">Try this example...</a>
<pre class="prettyprint">
&lt;head>
	&lt;!-- Include the required JavaScript libraries: -->
	&lt;script src='jquery/jquery.js' type='text/javascript'>&lt;/script>
	&lt;script src='jquery/ui.core.js' type='text/javascript'>&lt;/script>

	&lt;link rel='stylesheet' type='text/css' href='skin/ui.dynatree.css' >
	&lt;script src='jquery.dynatree.js' type='text/javascript'>&lt;/script>

	&lt;!-- Add code to initialize the tree when the document is loaded: -->
	&lt;script type='text/javascript'>
	$(function(){
		$("#tree").dynatree({
			onSelect: function(dtnode) {
				alert("You selected " + dtnode);
			}
		});
	});
	&lt;/script>
&lt;/head>
&lt;body>
	&lt;!-- Add a &lt;div> element where the tree should appear: -->
	&lt;div id="tree">
		&lt;!-- Insert a &lt;ul> elemet to define the structure: -->
		&lt;ul>
			&lt;li data="key: '1'">item1 with key and tooltip
			&lt;li data="key: '2'">item2
			&lt;li data="key: '3', isFolder: true">&lt;span>Folder with some children&lt;/span>
				&lt;ul>
					&lt;li data="key: '3.1'">Sub-item 3.1
					&lt;li data="key: '3.2'">Sub-item 3.2
				&lt;/ul>

			&lt;li data="key: '4', expand: true">&lt;span>Document with some children&lt;/span>
				&lt;ul>
					&lt;li data="key: '4.1'">Sub-item 4.1
					&lt;li data="key: '4.2'">Sub-item 4.2
				&lt;/ul>
		&lt;/ul>
	&lt;/div>
&lt;/body>
</pre>
	</div>


<h4>Initializing the tree structure programmatically</h4>
<p>
	Finally, it is always possible to program the DynaTree and DynaTreeNode objects directly.
</p>
<p>
	See also <a href="#programming">Programming dynatree</a>.
</p>

<div class="codesample">
	<a href="sample-2.html">Try this example...</a>
<pre class="prettyprint">
$(function(){
	// Initialize the tree in the onload event
	$("#tree").dynatree({
		onSelect: function(dtnode) {
			alert("You selected " + dtnode);
		}
	});
	// Now get the root node object
	var rootNode = $("#tree").dynatree("getRoot");
	// Call the DynaTreeNode.append() member function and pass options for the new node
	var childNode = rootNode.append({
		title: "Child node 1",
		tooltip: "This child node was added programmatically.",
		isFolder: true
	});
	//
	childNode.append({
		title: "Document using a custom icon",
		icon: "customdoc1.gif"
	});
});
</pre>
</div>


<h2>Handling events</h2>

<p>
	When a user clicks a node, we want to react in some  way. So at least we want to implement a <code>onSelect</code>
	handler.
</p>
<p>
	All event handlers are passed an instance of DynaTreeNode as argument.<br>
	<code>this</code> refers to the node's &lt;span> tag.<br>
	The node options can be accessed like this:
</p>
<pre class="prettyprint">
onSelect: function(dtnode) {
	alert("You selected " + dtnode.data.title);
},
</pre>

<p>
	See also <a href="#programming">Programming dynatree</a>.
</p>


<h3>Handling select/click</h3>

<p>
	The following example handles a selection event by opening a url in a new window.<br>
	This assumes, that we have defined an additional custom attribute 'url' in the node options, like so:
</p>

<pre class="prettyprint">
&lt;ul>
	&lt;li data="url: 'http://jquery.com'">jQuery home
	&lt;li data="url: 'http://docs.jquery.com'">jQuery docs
</pre>

<p>
	or
</p>

<pre class="prettyprint">
children: [
	{ title: "jQuery home", url: "http://jquery.com" },
	{ title: "jQuery docs", url: "http://docs.jquery.com" },
</pre>

<p>
	Also, the title of the currently selected node is displayed in the &lt;span id='echoSelected'> tag.
</p>

<div class="codesample">
<a href="sample-events.html">Try this example...</a>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onSelect: function(dtnode) {
		if( dtnode.data.url )
			window.open(dtnode.data.url);
		$("#echoSelected").text(dtnode.data.title);
	},
	onUnselect: function(dtnode) {
		$("#echoSelected").text("-");
	},
	[&#8230;]
});
</pre>
</div>


<h3>Handling focus changes</h3>

<p>
	If we use the cursor keys to walk the tree nodes, the focus changes to the next node, but the selected node remains the same unless we use [Space] or [Enter].<br>
	Also, when we click on a folder node it is only focused, but not selected.
</p>
<p>
	The following example writes the title of the currently focused node to the &lt;span id='echoFocused'> element:
</p>

<div class="codesample">
<a href="sample-events.html">Try this example...</a>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onFocus: function(dtnode) {
		$("#echoFocused").text(dtnode.data.title);
	},
	onBlur: function(dtnode) {
		$("#echoFocused").text("-");
	},
	[&#8230;]
});
</pre>
</div>


<h3 id="lazyLoading">Loading child nodes on demand ('lazy loading')</h3>

<p>
	Dynatree supports delayed loading of tree nodes, which means we read the nodes only when the parent is expanded.
</p>
<p>
	We have to
</p>
<ul>
	<li>Mark some or all nodes as lazy, by setting the isLazy option to true.
	<li>Implement the onLazyRead callback to send an Ajax request, create the child nodes, and set the 'ok' status.
</ul>

<div class="codesample">
<a href="sample-events.html">Try this example...</a>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onLazyRead: function(dtnode){
		dtnode.appendAjax({url: "/sendData",
	                       data: {"key": dtnode.data.key, // Optional url arguments
		                          "mode": "all"
		                          },
		                   cache: false // Append random '_' argument to url to prevent caching.
		                  });
	},
	[&#8230;]
});
</pre>
</div>

<p>
	Because the data request is performed asynchronously, the browser will not 
	block and is still responsive. Dynatree will display a spinning wheel, while waiting for the request to 
	complete.<br>
	This webservice is expected to return an JSON object response, as explained 
	in <a href="#nodeOptions">Node options</a>.<br>
	See also <a href="#ajaxResponse">Initializing the structure from an Ajax response</a> 
	for a sample to initialize the whole tree with an Ajax request.<br>
</p>


<h2 id="programming">Programming dynatree</h2>

<p>
	Two functions can be used to get a DynaTree object and the root DynaTreeNode object:
</p>
<pre class="prettyprint">
	var tree = $("#tree").dynatree("getTree");
	var rootNode = $("#tree").dynatree("getRoot");
</pre>

<p>
	<strong>DynaTree class members</strong>
</p>
<dl class="optionList">
	<dt>enableUpdate(enable)
	<dd>
		Turn rendering on or off. Disabling update may speedup processing, when adding lots of nodes.<br>
		Don't forget to turn rendering back on, after applying the changes. 
	</dd>
	<dt>getNodeByKey(key)
	<dd>
		Return DynaTreeNode with a given key or 'null' if not found.
	</dd>
	<dt>getRoot()
	<dd>
		Return the root DynaTreeNode object.
	</dd>
	<dt>getSelectedNode()
	<dd>
		Return the currently selected DynaTreeNode or null.
	</dd>
	<dt>selectKey(key)
	<dd>
		Select and focus node with a given key and fire focus and select events.<br>
		If <code>selectionVisible</code> option is set, all parents will be expanded as necessary.<br>
		If key is null, the current selection is removed.<br>
		Return the selected DynaTreeNode.
	</dd>
</dl>

<p>
	<strong>DynaTreeNode class members</strong>
</p>
<dl class="optionList">
	<dt>Attribute 'data'
	<dd>
		Use this attribute to access all node options that were passed to create
		this node.<br>
		For example <code>dtnode.data.title</code> or <code>dtnode.data.tooltip</code>.
		See also <a href="#nodeOptions">Node options</a>.
	</dd>
	<dt>append(nodeArray)
	<dd>
		Accepts a node or an array of nodes to create child nodes.<br>
		The nodes may contain a <code>children</code> option to build a hierarchy.<br>
		Returns the new DynaTree object (the first one, if an array was passed).
		<br>
		The nodeArray must be formatted like the data'a <code>children</code> object.
		(See also <a href="#nodeOptions">Node options</a>).
	</dd>
	<dt>appendAjax(ajaxOptions)
	<dd>
		Accepts a standard jQuery Ajax option object.<br>
		An asynchronous request is started, so this function returns immediately.
		While loading, a spinning wheel is displayed. On error, a red icon is shown.<br>
		The request handler must return a JSON object, formatted like the data'a <code>children</code> object (see also <a href="#nodeOptions">Node options</a>.).<br>
		Use the <code>setLazyNodeStatus()</code> function to display the result.<br>
	</dd>
	<dt>focus()
	<dd>
		Set focus to this node. Parent nodes are expanded, if this is necessary
		to make it visible.
	</dd>
	<dt>makeVisible()
	<dd>
		Expand all parents as neccessary, to make this node visible.
	</dd>
	<dt>remove()
	<dd>
		Remove this node from tree.
	</dd>
	<dt>removeChildren()
	<dd>
		Remove all children and collpase this node.
	</dd>
	<dt>select()
	<dd>
		Select this node and fires a select event.<br>
		If <code>selectionVisible</code> option is set, all parents will be expanded as necessary.<br>
		Focus is <em>not</em> set.
	</dd>
	<dt>setLazyNodeStatus(status)
	<dd>
		Display a dummy child node, to provide feedback, when loading a lazy node's content. <br>
		Possible status:
		<ul>
		<li><code>DTNodeStatus_Loading</code>: show a spinning wheel, with 'loading...' message.
		<li><code>DTNodeStatus_Error</code>: show an error icon and message.
		<li><code>DTNodeStatus_Ok</code>: Remove the status node.
		</ul>
		Messages may be customized using the <code>strings.loading</code> and <code>strings.loadError</code> options.
	</dd>
	<dt>toggleExpand()
	<dd>
		Toggle expansion state.<br>
		Expanding a lazy node, fires a onLazyRead event.
	</dd>
	<dt>unselect()
	<dd>
		Unselect this node and fires an unselect event.
	</dd>
</dl>

<p>
	Examples for selecting a node with key '1234':
</p>
<pre class="prettyprint">
$("#tree").dynatree("getTree").selectKey("1234");
// or another way:
$("#tree").dynatree("getTree").getNodeByKey("1234").select();
// .. or yet another way:
$("#ui-dynatree-id-1234").attr("dtnode").select();
</pre>

<p>
	Access the currently selected node:
</p>
<pre class="prettyprint">
var dtnode = $("#tree").dynatree("getSelectedNode");
if( dtnode )
	alert("Currently selected: " + dtnode.data.title);
</pre>


<h2>Theming and translation</h2>

<p>
	Changing the icon for distinct nodes is done by defining the 'icon' option:
</p>

<pre class="prettyprint">
&lt;ul>
	&lt;li data="icon: 'customdoc1.gif'">Node 2 (with custom icon)
</pre>

<p>
	or
</p>

<pre class="prettyprint">
children: [
	{ title: "Node 2", icon: "customdoc1.gif" },
</pre>

<p>
	To apply a custom skin, we would change the image folder and include a custom .css file:
</p>
<div class="codesample">
<a href="sample-theming.html">Try this example...</a>
<pre class="prettyprint">
&lt;script src='../jquery/jquery.js' type='text/javascript'>&lt;/script>
&lt;script src='../jquery/ui.core.js' type='text/javascript'>&lt;/script>
&lt;!-- Include a customized stylesheet: -->
&lt;link href='custom-skin/ui.dynatree.css' rel='stylesheet' type='text/css' >
&lt;script src='../src/jquery.dynatree.js' type='text/javascript'>&lt;/script>

&lt;script type='text/javascript'>
	$(function(){
		$("#tree").dynatree({
			imagePath: "custom-skin/", // Use a custom image folder
			[&#8230;]
		});
	});
&lt;/script>
</pre>
</div>

<p>
	Strings can be translated in the tree options:
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	strings: {
		loading: "Daten werden geladen&#8230;",
		loadError: "Fehler beim Laden!"
	},
});
</pre>


<h2><a id="issues"></a>Feedback, version history, credits and known issues</h2>

<h3>Feedback</h3>
<p>
	First of all: this is work in progress.<br>
	Any kind of feedback is very welcome :-)
</p>
<ul>
	<li>A <a href="http://groups.google.com/group/dynatree">discussion forum</a> is in place to ask questions or discuss features.
	<li>Use the <a href="http://code.google.com/p/dynatree/issues/list">Issue Tracker</a> to get a list of known bugs, or vote for a feature.<br>
		Please make sure you searched the group and issue tracker, before adding a new request.
	<li>You may also contact me directly at <i>martin at_sign wwWendt.de</i>.
</ul>
<h3>Credits</h3>
<p>
	I am using the <a href="http://prendreuncafe.com/work/jqplanize/">planize plugin</a> by Nicolas Perriault for the table of contents.<br>
	I am using the <a href="http://code.google.com/p/google-code-prettify/">prettify.js</a> by Mike Samuel for syntax highlighting in the of source code samples.<br>
</p>
</body>
</html>
